<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title><?php echo $title;?></title>
		
		<?php echo css_asset('styles.css');?>
		<?php echo css_asset('jqx.base.css');?>
		
		<?php echo js_asset('jquery-1.7.2.min.js');?>
		<?php echo js_asset('jqxcore.js');?>
		
		<?php echo js_asset('jqxvalidator.js');?>
		
		<!-- BUTTON -->
		<?php echo js_asset('jqxbuttons.js');?>
		
		<!-- WINDOW -->
		<?php echo js_asset('jqxwindow.js');?>
		
		<script type="text/javascript">
			$(document).ready(function () {
				var theme = '';
				
				/* START FORM */
				$("#eventWindow").jqxWindow({ width: 320, height: 110, resizable: false, theme: theme, isModal: true, autoOpen: false, okButton: $("#ok"), modalOpacity: 0.05 });
				$("#ok").jqxButton({ theme: theme });
				
				// initialize validator.
				$('#loginPanel').jqxValidator({
				 rules: [
						{ input: '#userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
						{ input: '#userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup', rule: 'length=3,12' },
						{ input: '#passwordInput', message: 'Password is required!', action: 'keyup', rule: 'required' },
						{ input: '#passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup', rule: 'length=4,12' }
						]
				});
				/* END FORM */
				
				/* START ACTION */
				$('#loginButton').bind('click', function () {
					var form_validation = $('#loginPanel').jqxValidator('validate');
					
					if(form_validation){
						
						var username = $('input:text.#userInput').val();
						var password = $('input:password.#passwordInput').val();
						$.ajax({
							type: 'POST',
							url: 'index.php?c=c_login&m=do_login',
							data: ({username: username, password: password}),
							success: function(data, status, response){
								responsetext = eval(response.responseText);
								if(responsetext == 1){
									var redirect = 'index.php?c=welcome';
									window.location = redirect;
								}else{
									createEvents("Username atau Password masih salah!");
								}
							},
							error: function(){
								alert('error system');
							}
						});
						
					}
				});
				/* END ACTION */
				
				/* START FUNCTION */
				function createEvents(msg) {
					$('#eventLog').html(msg);
					$("#eventWindow").jqxWindow('show');
				}
				
				$('#passwordInput').keypress(function(e) {
					if(e.which == 13) {
						jQuery(this).blur();
						jQuery('#loginButton').focus().click();
					}
				});
				/* END FUNCTION */
			});
		</script>
		
	</head>
	<body>
		<div id="topContentWrap">
			<div id="topContent">
			   <img src="<?php echo image_asset_url('yamahalogo02.png');?>" />
			   <div><?php echo $sidebar;?></div>
			</div>
		</div>
		<div id="middleWrap">
			<div id="middlePanel">
				<div class="left">
					<h2>SIMSDM-YMPI v1.0</h2>
					<p><span>SIMSDM-YMPI</span> adalah sistem informasi untuk mengelola Sumber Daya Manusia (SDM) PT. Yamaha Musical Products Indonesia, PIER Pasuruan, Jawa Timur. Sistem ini dilengkapi dengan modul aplikasi untuk mengelola proses penerimaan karyawan baru (rekrutmen) hingga proses pemutusan hubungan kerja (PHK) karyawan.</p>
					<p><span>SIMSDM-YMPI v1.0</span> merupakan versi awal sistem informasi ini yang dirilis pada Agustus 2012. Pada rilis ini, <span>SIMSDM-YMPI</span> terdiri dari 11 (sebelas) modul terintegrasi, termasuk di dalamnya <strong>Payroll</strong> (Sistem Penggajian).</p>
				</div>
				<div id="loginPanel">
					<h2>User Login</h2>
					<h3>Enter UserName:</h3><div class="blank"></div>
					<input type="text" id="userInput" />
					<h3>Enter Password:</h3><div class="blank"></div>
					<input type="password" id="passwordInput" />
					<p><a href="#">Forgot Password?</a></p>
					<a href="#" class="login" id="loginButton">Login</a>
				</div>
				<div id="gap"></div>
				<div id="contact">
					<p>+6231-8708456/7</p>
				</div>
			</div>
		</div>	
		<div id="footWrap">
			<div id="footPanel">
				<div id="footNav">
					<!-- <ul>
						<li><a href="#">Client Testimonials</a></li>
						<li><div class="blank">|</div></li>
						<li><a href="#">Latest Events</a></li>
						<li><div class="blank">|</div></li>
						<li><a href="#">Our Online Support</a></li>
						<li><div class="blank">|</div></li>
						<li><a href="#">Solutions</a></li>
						<li><div class="blank">|</div></li>
						<li><a href="#">Forum</a></li>
						<li><div class="blank">|</div></li>
						<li><a href="#">What Our Future Plans</a></li>
						<li><div class="blank">|</div></li>
						<li><a href="#">Projects</a></li>
						<li><div class="blank">|</div></li>
						<li><a href="#">Contact Us</a></li>
					</ul> -->
					<a href="#">About</a> | <a href="#">Technical Team</a> | <a href="#">Releases</a> | <a href="#">News</a> | <a href="#">Roadmap</a> | <a href="#">Contact Us</a>
				</div>
				<div id="copyright">(c) Copyright @ Yamaha Musical Products Indonesia (YMPI), 2012. All Rights Reserved.</div>
		
				<!-- <div id="validation">
					<ul>
						<li><a href="http://validator.w3.org/check?uri=referer">xhtml valid</a></li>
						<li><div class="blank"></div></li>
						<li><a href="http://jigsaw.w3.org/css-validator/check/referer">css valid</a></li>
					</ul>
				</div> -->
			</div>
		</div>
		
		<div id="eventWindow">
			<div><img width="16" height="16" src="<?php echo image_asset_url('icon/error.png');?>" alt="" />&nbsp;Login Process...</div>
			<div>
				<div id="eventLog"></div>
				<div style="float: right; margin-top: 15px;">
					<input type="button" id="ok" value="OK" style="margin-right: 10px" />
				</div>
			</div>
		</div>
	</body>
</html>  